<template>
    <div class="movieInfo" :data="movie">
        <div class="input-area" style="margin-bottom: 50px">
            <el-input
                v-model="textarea1"
                placeholder="请输入您的问题..."
                @keyup.enter.native="sendMessageOne"
                class="input-field"
                :style="{ maxWidth: 'calc(100% - 100px)' }"
            ></el-input>
            <el-button type="primary" @click="sendMessageOne">发送</el-button>
        </div>
        <div v-if="!ask">
            <div class="block">
                <el-col :span="4"><p style="color: #FFFFFF">.</p></el-col>
                <el-col :span="16">
                    <span class="demonstration">猜你喜欢</span>
                    <el-carousel
                        ref="carousel"
                        class="carousel-first"
                        trigger="hover"
                        :interval="3000"
                        height="35rem"
                        type="card"
                        arrow="always"
                    >
                        <el-carousel-item
                            class="item"
                            v-for="item in recommendMovie3"
                            :key="item.movieId">
                            <el-image class="img" :src="item.moviePoster" alt="电影海报" referrerpolicy="no-referrer"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <span class="demonstration">评分最高</span>
                    <el-carousel
                        ref="carousel"
                        class="carousel-first"
                        trigger="hover"
                        :interval="3000"
                        height="35rem"
                        type="card"
                        arrow="always"
                    >
                        <el-carousel-item
                            class="item"
                            v-for="item in recommendMovie1"
                            :key="item.movieId">
                                <el-image class="img" :src="item.moviePoster" alt="电影海报" referrerpolicy="no-referrer"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <span class="demonstration">最多人看</span>
                    <el-carousel
                        ref="carousel"
                        class="carousel-first"
                        trigger="hover"
                        :interval="3000"
                        height="35rem"
                        type="card"
                        arrow="always"
                    >
                        <el-carousel-item
                            class="item"
                            v-for="item in recommendMovie2"
                            :key="item.movieId">
                            <el-image class="img" :src="item.moviePoster" alt="电影海报" referrerpolicy="no-referrer"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </div>
        </div>
        <div v-if="ask">
            <div class="background">
                <el-popover
                    placement="top"
                    width="160"
                    v-model="shouCang">
                    <p>是否收藏该电影？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="shouCang = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="save">确定</el-button>
                    </div>
                    <el-button slot="reference" type="warning" style="position:fixed;top: 180px;right: 30px" size="medium">收藏</el-button>
                </el-popover>
                <el-row>
                    <el-col :span="8">
                        <div class="movie-info-top-left" v-if="movie.moviePoster===''||movie.moviePoster.isEmpty">
                            <!--                                    <img class="image" :src="movie.pic"/>-->
                            <img src="../../../../assets/images/noPoster.png" alt="" width="400" height="512" >
                        </div>
                        <div class="movie-info-top-left" v-else>
                            <!--                                    <img class="image" :src="movie.pic"/>-->
                            <img :src="movie.moviePoster" alt="" width="400" height="512" referrerpolicy="no-referrer">
                        </div>
                    </el-col>

                    <el-col :span="16">
                        <div class="movie-info-top-right">
                            <!-- 电影名 -->
                            <div class="movie-name">
                                {{ movie.movieName }}
                            </div>
                            <el-row>
                                <el-col :span="20">
                                    <div class="each">
                                        <span>导演：</span>
                                        <span>{{ movie.movieDirector }}</span>
                                    </div>
                                    <div class="each">
                                        <span>类型：</span>
                                        <span>{{ movie.movieType }}</span>
                                    </div>
                                    <div class="each">
                                        <span>制片国家/地区：</span>
                                        <span>{{ movie.movieNation }}</span>
                                    </div>
                                    <div class="each">
                                        <span>语言：</span>
                                        <span>{{ movie.movieLanguage }}</span>
                                    </div>
                                    <div class="each">
                                        <span>主演：</span>
                                        <span>{{ movie.movieCast }}</span>
                                    </div>
                                    <div class="each">
                                        <span>上映时间：</span>
                                        <span>{{ movie.movieRelease }}</span>
                                    </div>
                                    <div class="each">
                                        <span>简介：</span>
                                        <span>{{ movie.movieReview }}</span>
                                    </div>
                                    <div class="each">
                                        <span style="color: #ff9900">
                                            更多相关信息可以点右下角机器人查询~
                                        </span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <img src="../../../../assets/images/robot2.png" alt="" width="150" @click="drawer = true" class="aiBtn">
        <el-drawer title="我是标题"
                   :visible.sync="drawer"
                   :with-header="false">
            <el-card>
                <div class="chat-box" ref="chatBox">
                    <div v-for="(msg, index) in messages" :key="index" class="message">
                        <div v-if="msg.type === 'user'" class="user-message">
                            <div class="message-content user-message-content">{{ msg.content }}</div>
                            <img :src="avatar" alt="User" class="avatar" />
                        </div>
                        <div v-if="msg.type === 'bot'" class="bot-message">
                            <img :src="avatar_bot" alt="Bot" class="avatar" />
                            <div class="message-content bot-message-content">{{ msg.content }}</div>
                        </div>
                    </div>
                </div>
                <div class="input-area">
                    <el-input
                        v-model="input"
                        placeholder="请输入您的问题..."
                        @keyup.enter.native="sendMessageMore"
                        class="input-field"
                        :style="{ maxWidth: 'calc(100% - 100px)' }"
                    ></el-input>
                    <el-button type="primary" @click="sendMessageMore">发送</el-button>
                </div>
            </el-card>
        </el-drawer>
    </div>
</template>

<script>
// import {isFavourited} from "../../../../api/chat";

import {mapGetters} from 'vuex'
import {checkFilm, collectFilm, chatAI, movieQA, rankMovie} from '../../../../api/chat'

export default {
  data () {
    return {
      recommendMovie1: [],
      recommendMovie2: [],
      recommendMovie3: [],
      textarea1: '',
      shouCang: false,
      drawer: false,
      ask: false,
      input: '',
      filmCollection: {
        userId: '',
        movieId: ''
      },
      movie: {movieCast: '',
        movieDirector: '',
        movieId: -1,
        movieLanguage: '',
        movieName: '',
        movieNation: '',
        moviePoster: '',
        movieRelease: '',
        movieReview: '',
        movieType: ''},
      messages: [],
      // avatar: localStorage.getItem('avatar'),
      avatar_bot: require('../../../../assets/images/robot.png'),
      avatar: require('../../../../assets/images/user.png'),
      favouriteMovie: {
        mvName: '',
        userId: ''
      }
    }
  },
  methods: {
    getRecommend () {
      console.info(1)
      rankMovie(1).then(res => {
        this.recommendMovie1 = res.data
        rankMovie(2).then(res => {
          this.recommendMovie2 = res.data
          rankMovie(3).then(res => {
            this.recommendMovie3 = res.data
          })
        })
      })
    },
    sendMessageOne () {
      this.movie.movieId = '载入中...'
      this.movie.movieCast = '载入中...'
      this.movie.movieDirector = '载入中...'
      this.movie.movieName = '载入中...'
      this.movie.movieLanguage = '载入中...'
      this.movie.movieNation = '载入中...'
      this.movie.moviePoster = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201605%2F07%2F20160507160904_Gr2cF.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1734967302&t=d644efc464acaf70379862c1f8481724'
      this.movie.movieRelease = '载入中...'
      this.movie.movieType = '载入中...'
      this.movie.movieReview = '载入中...'
      this.ask = true
      console.log('消息:', this.input)
      if (this.textarea1.trim() === '') return
      const textarea = this.textarea1
      this.input = ''
      movieQA(textarea).then(res => {
        console.info(res)
        if (!res.data) {
          this.ask = false
          this.$message({
            message: '查询失败，请重新查询',
            type: 'warning'
          })
        } else {
          this.movie.movieId = res.data.movieId
          this.movie.movieCast = res.data.movieCast
          this.movie.movieDirector = res.data.movieDirector
          this.movie.movieName = res.data.movieName
          this.movie.movieLanguage = res.data.movieLanguage
          this.movie.movieNation = res.data.movieNation
          this.movie.moviePoster = res.data.moviePoster
          this.movie.movieRelease = res.data.movieRelease
          this.movie.movieType = res.data.movieType
          this.movie.movieReview = res.data.movieReview
        }
      })
    },
    sendMessageMore () {
      console.log('消息:', this.input)
      if (this.input.trim() === '') return

      this.messages.push({ type: 'user', content: this.input })
      const userInput = this.input
      this.input = ''
      chatAI(userInput).then(res => {
        setTimeout(() => {
          this.messages.push({ type: 'bot',
            content: res.data })
          this.scrollToBottom()
        }, 500)
      })

      this.scrollToBottom()
    },
    scrollToBottom () {
      this.$nextTick(() => {
        this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight
      })
    },
    save () {
      if (this.userName === '游客') {
        this.$message({
          message: '请登录',
          type: 'warning'
        })
        this.$router.push({path: '/login'})
      } else {
        this.shouCang = false
        checkFilm(this.userId, this.movie.movieId).then(res => {
          if (!res) {
            this.filmCollection.userId = this.userId
            this.filmCollection.movieId = this.movie.movieId
            collectFilm(this.filmCollection)
            this.$message({
              message: '收藏成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '已收藏该电影',
              type: 'warning'
            })
          }
        })
      }
    }
  },
  created () {
    this.getRecommend()
  },
  computed: {
    ...mapGetters({
      userId: 'user/getUserId',
      userName: 'user/getUserName'
    })
  }
}
</script>

<style scoped>
.aiBtn{
    position:fixed;
    bottom:10px;
    right:5px;
}
.movie-info-top {
    height: 38rem;
    width: 100%;
    background-size: cover;
}

.movie-info-top .background {
    height: 36rem;
}

.movie-info-top-left, .movie-info-top-right {
    width: 100%;
    height: 100%;
}

/************** top left **************/
.movie-info-top-left .image {
    margin-top: 5%;
    margin-left: 20%;
    text-align: center;
    width: 60%;
}

/************** top right **************/
.movie-info-top-right .movie-name, .demonstration {
    padding-top: 2rem;
    /*color: white;*/
    width: 80%;
    font-size: 2rem;
    font-weight: bold;
}

.movie-info-top-right .each {
    /*color: white;*/
    margin-top: 1rem;
    max-width: 100%;
    padding: 10px;
}

.movie-info-top-right .rate {
    font-size: 0.8rem;
    margin-left: 2rem;
    margin-top: 5px;
    width: 30%;
}

.movie-info-top-right .actors-and-introduction {
    /*color: white;*/
    margin-top: 1rem;
}

.movie-info-top-right .introduction {
    margin-left: 2rem;
    width: 50%;
}

/deep/ .el-rate__text {
    color: #ff9900;
}

@media screen and (max-width: 1200px) {
    .show-first {
        display: none;
    }

    .show-second {
        display: block;
    }

    .movie-info-top {
        height: 100%;
    }

    .movie-info-top .background {
        height: 100%;
    }

    .movie-info-top-left .image {
        margin-top: 20%;
    }

    .movie-info-top-right .rate {
        width: 60%;
    }
}

@media screen and (min-width: 1200px) and (max-width: 4000px) {
    .show-first {
        display: block;
    }

    .show-second {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    .blur-bg {
        height: 26rem;
    }
}

@media screen and (min-width: 450px) and (max-width: 501px) {
    .blur-bg {
        height: 25rem;
    }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
    .blur-bg {
        height: 23rem;
    }
}

@media screen and (min-width: 700px) and (max-width: 800px) {
    .blur-bg {
        height: 24rem;
    }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
    .blur-bg {
        height: 22rem;
    }
}
.pic {
    width: 100px;
    height: 200px;
    background-image: url("../../../../assets/images/moviePic.png");
}
/deep/ .el-carousel__item {
    left: 6%;
}

/deep/ .el-carousel__button {
    background-color: #545c64;
    border-radius: 5px;
    color: #ffffff;
}

.item {
    width: 25rem;
    height: 100%;
    margin: 0 auto;

    .img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
}

.chat-box {
    height: calc(100vh - 210px);
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
}
.movieInfo {
    margin-top: 20px;
    /*height: calc(100vh - 210px);*/
    /*overflow-y: auto;*/
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
}
.input-area {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.message {
    margin: 10px 0;
    display: flex;
    align-items: center;
}
.user-message {
    margin-top: 2px;
    display: flex;
    align-items: center;
    margin-left: auto;
}
.bot-message{
    margin-top: 2px;
    display: flex;
    align-items: center;
}
.avatar {
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
    width: 50px;
    height: 50px;
}
.input-field {
    flex: 1;
    margin-right: 10px;
    max-width: calc(100% - 100px);
}
.message-content {
    max-width: 100%; /* 确保消息内容框不超过聊天框宽度 */
    background-color: #f0f0f0; /* 随意选择背景颜色 */
    border-radius: 5px; /* 圆角 */
    padding: 10px; /* 内边距 */
    overflow-wrap: break-word; /* 使长文本换行 */
    white-space: normal; /* 允许文本在标签内换行 */
    word-wrap: break-word; /* 兼容旧版浏览器 */
}
.user-message-content {
    background-color: #d1e7dd; /* 用户消息的背景颜色 */
}
.bot-message-content {
    background-color: #cfe2ff; /* 机器人消息的背景颜色 */
}
</style>
